<template>
  <div class="deviceStatus" v-loading="loading" :element-loading-text="$t('oralScan.oralScan_116')">
    <el-card class="version-log-management-page__header">
      <el-row :gutter="20">
        <el-col :span="8">
          <el-input v-model="query.serialNumber" :placeholder="$t('oralScan.oralScan_48')" clearable />
        </el-col>

        <el-col :span="8">
          <el-input v-model="query.softwareVersion" :placeholder="$t('oralScan.oralScan_47')" clearable />
        </el-col>
       
        <el-col :span="6" class="query_btn">
          <el-button type="primary" icon="el-icon-search" @click="toSearch">
            {{ $t('versionLogManagement.version00') }}
          </el-button>
          <el-button type="primary" @click="exportExcel()">
            {{ $t('orderManage.export') }}
          </el-button>
          <el-button @click="reset()">{{ $t('add.add124') }}</el-button>
        </el-col>
      </el-row>
    </el-card>
    <div class="table_box">
      <el-table :data="tableData" style="width: 100%" height="570" @sort-change="handleSortChange">
        <el-table-column width="150" prop="serialNumber" :label="$t('oralScan.oralScan_10')" align="center"  sortable="custom" />
        </el-table-column>
        <el-table-column width="150" prop="scanStartTime" :label="$t('oralScan.oralScan_110')" align="center"   sortable="custom"/>
        </el-table-column>
        <el-table-column width="150" prop="softwareVersion" :label="$t('oralScan.oralScan_112')" align="center"  sortable="custom" />
        </el-table-column>
        <el-table-column width="150" prop="ipAddress" :label="$t('oralScan.oralScan_113')" align="center"  sortable="custom" />
        </el-table-column>
        <el-table-column :label="$t('tableSweeper.tableSweeper_23')" align="center">
          <el-table-column prop="totalNum" :label="$t('oralScan.oralScan_41')" width="150" align="center" show-overflow-tooltip  sortable="custom" />
          <el-table-column prop="impressionSum" :label="$t('tableSweeper.tableSweeper_15')" width="150" align="center" show-overflow-tooltip  sortable="custom" />
          <el-table-column prop="postCoreSum" :label="$t('tableSweeper.tableSweeper_16')" width="150" align="center" show-overflow-tooltip  sortable="custom" />
          <el-table-column prop="plantSum" :label="$t('tableSweeper.tableSweeper_17')" width="150" align="center" show-overflow-tooltip  sortable="custom" />
          <el-table-column prop="movableBracketSum" :label="$t('tableSweeper.tableSweeper_18')" width="150" align="center" show-overflow-tooltip  sortable="custom" />
          <el-table-column prop="otherTypeSum" :label="$t('tableSweeper.tableSweeper_19')" width="150" align="center" show-overflow-tooltip  sortable="custom" />
        </el-table-column>
        <el-table-column width="150" prop="ip" :label="$t('tableSweeper.tableSweeper_24')" align="center"  sortable="custom" />
        </el-table-column>
        <el-table-column width="150" prop="gpuInformation" :label="$t('tableSweeper.tableSweeper_25')" align="center" />
        </el-table-column>
        <el-table-column width="150" prop="cpuInformation" :label="$t('tableSweeper.tableSweeper_26')" align="center" />
      </el-table-column>

      </el-table>
    </div>

    <el-pagination background :current-page="query.page" :page-size="query.limit" :page-sizes="[10, 20, 50, 100]" :total="total" layout="total, sizes, prev, pager, next, jumper" @size-change="onPageSizeChange" @current-change="onPageChange" />
  </div>
</template>

<script>
import { formatDate } from '@/utils/index';
import { exportExl } from '@/utils/xls';
export default {
  name: 'OralScan',

  data() {
    return {
      loading: false,
      dates: [],
      tableData: [],
      query: {
        page: 1,
        limit: 10,
        serialNumber: '',
        softwareVersion: '',
      },
      total: 0,
    };
  },

  created() {
    this.toSearch();
  },
  mounted() { },
  methods: {
    toSearch() {
      this.query.page = 1;
      this.search();
    },
    handleSortChange({ prop, order }) {
      if (prop === 'serialNumber') {
        this.query.sortField = 'serial_number';
      } else if (prop === 'scanStartTime') {
        this.query.sortField = 'scan_start_time';
      } else if (prop === 'softwareVersion') {
        this.query.sortField = 'software_version';
      } else if (prop === 'ipAddress') {
        this.query.sortField = 'ip_address';
      } else if (prop === 'totalNum') {
        this.query.sortField = 'totalNum';
      } else if (prop === 'impressionSum') {
        this.query.sortField = 'impressionSum';
      } else if (prop === 'postCoreSum') {
        this.query.sortField = 'postCoreSum';
      } else if (prop === 'plantSum') {
        this.query.sortField = 'plantSum';
      } else if (prop === 'movableBracketSum') {
        this.query.sortField = 'movableBracketSum';
      } else if (prop === 'otherTypeSum') {
        this.query.sortField = 'otherTypeSum';
      }
      if (order === 'ascending') {
        this.query.sortType = 'asc';
      } else if (order === 'descending') {
        this.query.sortType = 'desc';
      }
      this.toSearch();
    },
    
    search() {
      this.$http({
        url: '/tablescandatarecording/deviceStatus',
        method: 'get',
        params: {
          page: String(this.query.page),
          limit: String(this.query.limit),
          serialNumber: this.query.serialNumber,
          softwareVersion: this.query.softwareVersion,
          startTime: this.query.startTime,
          endTime: this.query.endTime,
          sortField: this.query.sortField,
          sortType: this.query.sortType
        },
      })
        .then(({ data: res }) => {
          if (res.code !== 0) {
            return this.$message.error(res.msg);
          } else {
            this.tableData = res.data.list;
            this.total = res.data.total;
          }
        })
        .catch((err) => {
          console.log('err', err);
        });
    },
    onPageSizeChange(pageSize) {
      this.query.limit = pageSize;
      this.search();
    },
    onPageChange(page) {
      this.query.page = page;
      this.search();
    },
    reset() {
      this.query = {
        page: 1,
        limit: 10,
        serialNumber: '',
        softwareVersion: '',
      };
      this.toSearch();
    },
    exportExcel() {
      this.loading = true;
      this.$http({
        method: 'get',
        url: 'tablescandatarecording/deviceStatusExportExcel', //后端接口
        responseType: 'blob',
        params: {
          page: this.query.page,
          limit: String(this.total),
          serialNumber: this.query.serialNumber,
          softwareVersion: this.query.softwareVersion,
        },
      }).then(({ data: res }) => {
        let date = formatDate(new Date(), 'second');
        exportExl(res, `${this.$t('tableSweeper.tableSweeper_03')}_${date}.xls`);
        this.loading = false;
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.deviceStatus {
  width: 100%;
  height: 100%;

  .el-select,
  .el-date-editor {
    width: 100%;
  }

  .table_box {
    margin-top: 10px;
    margin-bottom: 10px;
  }

  .query_btn {
    text-align: right;
  }
}
</style>
